<template>
  <div id="login-container">
    <div class="login-form">
      <img class="login-form-logo" src="../assets/img/login-logo.png"/>
      <div class="form-container">
        <div class="login-form-item">
          <input type="text" placeholder="请输入账号" @focus="loginForm.yonghuming=''" :style="{color: loginForm.yonghuming === '请输入账号' ? 'gray' : 'black' }" v-model="loginForm.yonghuming">
        </div>
        <div class="login-form-item">
          <input type="password" placeholder="请输入密码" @focus="loginForm.mima=''" v-model="loginForm.mima">
        </div>
        <div class="login-form-item">
          <button class="login-form-item-inputBtn" @click="login()">登录</button>
        </div>
        <div class="login-form-item item-right">
          <span class="item-btn">忘记密码</span>
          <span>|</span>
          <span class="item-btn" @click="register" >注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return {
      loginForm: {
        yonghuming: '请输入账号',
        mima: '请输入密码',
        captcha: '请输入验证码'
      }
    }
  },
  methods:{
    login(){
      if(this.loginForm.yonghuming === '请输入账号' || this.loginForm.mima === '请输入密码' ){
        return this.$messageHelper.messageWarning('请输入完整信息');
      }
      if(this.loginForm.yonghuming === '' || this.loginForm.mima === ''){
        return this.$messageHelper.messageWarning('请输入完整信息');
      }
      this.$request.post('/yonghu/login', this.loginForm).then(res => {
        if(res.data.code === 200){
          this.shared.user = res.data.data.user;
          sessionStorage.setItem('user', JSON.stringify(res.data.data.user));
          this.$router.push('/index/noteEditor');
        }else{
          this.$messageHelper.messageWarning(res.data.msg);
        }
      })
    },
    register(){
      this.$router.push('/register');
    }
  }

}
</script>

<style lang="less">
  #login-container{
    background: url("../assets/img/login-background.png");
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-form{
      width: 440px;
      height: 580px;
      background: #fff;
      opacity: 0.9;
      padding: 0 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      .login-form-logo{
        width: 300px;
        margin: 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .form-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        .login-form-item {
          width: 80%;
          height: 46px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          input {
            width: 100%;
            height: 100%;
            border: rgb(231, 233, 232) 2px solid;
            border-radius: 8px;
            outline: none;
            font-size: 16px;
            padding-left: 20px;
            &:hover{
              border: rgb(0, 191, 255) 2px solid;
              cursor: pointer;
            }
          }
          .captcha-input {
            width: 70%;
          }
          .font-black{
            color: #000;
          }
          .font-gray{
            color: #ccc;
          }
          .captcha {
            width: 25%;
            height: 100%;
            text-align: center;
            line-height: 46px;
            font-size: 16px;
            border: rgb(231, 233, 232) 2px solid;
            border-radius: 8px;
            &:hover{
              border: rgb(0, 191, 255) 2px solid;
              cursor: pointer;
            }
          }
          .login-form-item-inputBtn{
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #00BFFF, #00FF00);
            border-radius: 8px;
            color: #fff;
            border: none;
            font-size: 24px;
            font-weight: 600;
            &:hover{
              cursor: pointer;
            }
          }
        }
        .item-right{
          margin-top: -20px;
          display: flex;
          justify-content: flex-end;
          width: 80%;
          gap: 6px;
          span{
            color: #00BFFF;
            font-size: 16px;
          }
          .item-btn:hover{
            color: red;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
